<template>
  <div class="person">
    <!-- <h2>姓名：{{ name }}</h2>
    <h2>姓名：{{ age }}</h2>
    <h2>姓名：{{ tel }}</h2> -->
    <!-- <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button> -->
  </div>
</template>
<!-- <script lang="ts">
// import {ref, reactive} from 'vue'
// ref 可以定义：基本类型，对象类型的响应数据
// reactive 只能定义：对象类型的响应数据
// export default {
//   name: 'Person123',
//   // setup(){
//   //   // console.log(this) setup 函数中的this是undefined, Vue3中已经弱化this了
//   //   // 数据，原来是写在data中的，此时的name、age、tel都不再是响应式的数据
//   //   let name = '张三' // 此时的name不是响应式的
//   //   let age = 18 // 此时的age不是响应式的
//   //   let tel = '13888888888' // 此时的tel不是响应式的
//   //   // 方法
//   //   function changeName (){
//   //     name = 'zhang-san' // 注意：这样修改的name，页面不会发生变化
//   //     console.log(name) // name确实改了，但name不是响应式
//   //   }
//   //   function changeAge (){}
//   //   function showTel (){}
//   //   // 将数据、方法交出去模板中才可以使用
//   //   return {name, age, tel, changeName, changeAge, showTel}
//   //   // setup的返回值也可以是一个渲染函数
//   //   // return ()=> '哈哈'
//   // },
//   // data(){
//   //   // data可以读取setup里定义的数据  因为 setup的生命周期比beforeCreate早
//   //   // vue2的选项式语法可以和vue3的setup语法共存，旧的写法里可以读setup里的数据，setup不可以读取旧的写法里的数据
//   //   return {
//   //       a: 100,
//   //       c: this.name,
//   //       d: 900
//   //   }
//   // },
//   // methods: {
//   //   changeName() {
//   //       this.name = 'zhang-san'
//   //   },
//   //   changeAge() {
//   //       this.age += 1
//   //   },
//   //   showTel () {
//   //       alert(this.tel)
//   //   }
//   // }
// }
</script> -->

<!-- 
    vue3项目中可能存在多个script 一个用来命名组件名字 一个用来写方法 两者不能直接合并
    可以安装一个插件 vite-plugin-vue-setup-extend 然后在vite.config.ts中进行引用后在script里加上name="组件名" 如果存在多个script不生效
-->
<script lang="ts" setup name="Person234">
    let name = '张三' // 此时的name不是响应式的
    let age = 18 // 此时的age不是响应式的
    let tel = '13888888888'

    function changeName (){
      name = 'zhang-san' // 注意：这样修改的name，页面不会发生变化
    }
    function changeAge (){}
    function showTel (){}
</script>

<style scoped>
    .person {
        background-color: #ddd;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button {
        margin: 0 5px;
    }
</style>
